<template>
  <div id="hy-swiper">
    <div class="swiper" @touchstart=touchStart @touchmove="touchMove" @touchend="touchEnd">
      <slot></slot>
    </div>
    <slot name="indicator">
    </slot>
    <div class="indicator">
      <slot name="indicator" v-if="showIndicator && slideCount>1">
        <div v-for="(item,index) in slideCount" class="indi-item" :class="{active: index===currentIndex-1}" :key="index"></div>
      </slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Swiper",
    props: {
      interval: {  /*间隔时间*/
        type:Number,
        default: 3000
      },
      animDuration: {
        type: Number,
        default: 300
      },
      moveRatio: {   /*滑动比例*/
        type:Number,
        default: 0.25
      },
      showIndicator: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        slideCount: 0,
        totalWidth: 0, //swiper的宽度
        swiperStyle: {},
        currentIndex: 1,  //当前的index
        scrolling: false  //是否正在滚动
      }
    },
    mounted (){
      setTimeout(() => {
        this.handleDom()   /*1.操作dom，在前后添加slide*/
        this.startTimer()  /*2.开启定时器*/
      },500)
    },
    methods: {
      /**
       * 定时器操作
       */
      startTimer () {
        this.playTimer = window.setInterval(() => {
          this.currentIndex++
          this.scrollContent(-this.currentIndex * this.totalWidth)
        },this.interval)
      },
      stopTimer () {
        window.clearInterval(this.playTimer)
      },
      /**
       * 滚到正确位置
       */
      scrollContent (currentPosition) {
        //1.设置正在滚动
        this.scrolling = true
        //2.开始滚动动画
        this.swiperStyle.transition = 'transform '+ this.animDuration + 'ms'
        this.setTransform(currentPosition)
        //3.判断滚动到的位置
        this.checkPosition()
        //4.滚动完成
        this.scrolling = false
      },
      /**
       * 校验正确的位置
       */
      checkPosition () {
        window.setTimeout(() => {
          //1.校验正确的位置
          this.swiperStyle.transition = '0ms'
          if(this.currentIndex >= this.slideCount + 1){
            this.currentIndex = 1
            this.setTransform(-this.currentIndex * this.totalWidth)
          }else if(this.currentIndex <= 0){
            this.currentIndex = this.slideCount
            this.setTransform(-this.currentIndex * this.totalWidth)
          }
          //2.结束移动后的回调
          this.$emit('transitionEnd',this.currentIndex-1)
        },this.animDuration)
      },
      /**
       * 设置滚动的位置
       */
      setTransform: function (position) {
        this.swiperStyle.transform = `translate3d(${position}px,0,0)`
        this.swiperStyle['-webkit-transform'] = `translate3d(${position}px),0,0`
        this.swiperStyle['-ms-transform'] = `translate3d(${position}px),0,0`
      },
      /**
       * 操作DOM，在DOM前后添加slide
       */
      handleDom: function () {
        //1.获取要操作的元素
        let swiperEl = document.querySelector('.swiper')
        let slideEls = swiperEl.getElementsByClassName('slide')
        //2.保存个数
        this.slideCount = slideEls.length
        //3.如果>1,在前后分别添加一个slide
        if(this.slideCount > 1){
          let cloneFirst = slideEls[0].cloneNode(true)
          let cloneLast = slideEls[this.slideCount - 1].cloneNode(true)
          swiperEl.insertBefore(cloneLast,slideEls[0])
          swiperEl.appendChild(cloneFirst)
          this.totalWidth = swiperEl.offsetWidth
          this.swiperStyle = swiperEl.style
        }
        //4.让swiper元素，显示第一个(目前显示前面添加的最后一个元素)
        this.setTransform(-this.totalWidth)
      },
      /**
       * 拖动事件的处理
       */
      touchStart: function (e) {
        //1.如果正在滚动，不可拖动
        if(this.scrolling) return
        //2.停止定时器
        this.stopTimer()
        //3.保存开始滚动的位置
        this.startX = e.touches[0].pageX
      },
      touchMove: function (e) {
        //1.计算拖动的距离
        this.currentX = e.touches[0].pageX
        this.distance = this.currentX - this.startX
        let currentPosition = -this.currentIndex * this.totalWidth
        let moveDistance = this.distance + currentPosition
        //2. 设置当前位置
        this.setTransform(moveDistance)
      },
      touchEnd: function () {
        //1.获取移动距离
        let currentMove = Math.abs(this.distance)
        //2.判断最终的距离
        if (this.distance === 0) {
          return
        } else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) { // 右移动超过moveRatio
          this.currentIndex--
        } else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) {
          this.currentIndex++
        }
        //3.移动到正确的位置
        this.scrollContent(-this.currentIndex * this.totalWidth)
        //4.移动完后，重新开启定时器
        this.startTimer()
      },
      /**
       * 控制上一个，下一个
       */
      previous: function () {
        this.changeItem(-1)
      },
      next: function () {
        this.changeItem(1)
      },
      changeItem: function (num) {
        //1.移除定时器
        this.stopTimer()
        //2.修改index和位置
        this.currentIndex += num
        this.scrollContent(-this.currentIndex * this.totalWidth)
        //3.添加定时器
        this.startTimer()
      }
    }
  }
</script>

<style scoped>
  #hy-swiper {
    overflow: hidden;
    position: relative;
  }
  .swiper {
    display: flex;
  }
  .indicator {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 8px;
  }
  .indi-item {
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #ffffff;
    line-height: 12px;
    margin: 0 5px;
  }
  .indi-item.active{
    background-color: rgba(212,62,46,1.0);
  }
</style>
